<template>
  <view class="container">
    <view class="title">请选择一张图片进行上传</view>

    <!-- 图片上传组件，启用预览功能 -->
    <uni-upload 
      :count="1" 
      :max-size="5" 
      :file-types="['image']" 
      :show-preview="true" 
      v-model="fileList" 
      class="upload-component"
    />
    
    <!-- 如果已有图片，显示图片；否则显示加号按钮 -->
    <view class="upload-btn" @click="selectImage">
      <image v-if="fileList.length" :src="fileList[0]" class="uploaded-image" />
      <text v-else class="plus-icon">+</text>
    </view>
    
    <!-- 图片上传规范 -->
    <view class="image-rules">
      <text>上传规范：</text>
      <text>1. 仅支持 JPG、PNG 格式。</text>
      <text>2. 图片大小不得超过 5MB。</text>
    </view>

    <!-- 输入框 -->
    <view class="input-container">
      <input 
        v-model="inputText" 
        placeholder="请输入相关需求" 
        class="input-box" 
      />
    </view>

    <!-- 上传按钮 -->
    <view class="upload-button" @click="uploadImage">
      <text class="upload-btn-text">上传</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const fileList = ref([]); // 用于存储上传的文件
const inputText = ref(""); // 输入框的绑定数据

// 选择图片的处理逻辑
const selectImage = () => {
  if (fileList.value.length > 0) {
    // 如果已经选择了图片，再次点击图片则重新选择
    uni.chooseImage({
      count: 1, // 最多选择1张图片
      success: (res) => {
        fileList.value = res.tempFilePaths;
      },
      fail: (err) => {
        console.error("图片选择失败", err);
      },
    });
  } else {
    // 如果没有选择图片，则触发选择
    uni.chooseImage({
      count: 1, // 最多选择1张图片
      success: (res) => {
        fileList.value = res.tempFilePaths;
      },
      fail: (err) => {
        console.error("图片选择失败", err);
      },
    });
  }
};

// 上传图片处理逻辑
const uploadImage = () => {
  if (fileList.value.length > 0) {
    // 执行上传操作，例如发送请求到后端
    uni.uploadFile({
      url: 'YOUR_UPLOAD_URL',  // 这里替换为你的上传地址
      filePath: fileList.value[0],
      name: 'file',
      success: (res) => {
        console.log("上传成功", res);
        uni.showToast({
          title: '上传成功',
          icon: 'success',
        });
      },
      fail: (err) => {
        console.error("上传失败", err);
        uni.showToast({
          title: '上传失败',
          icon: 'none',
        });
      },
    });
  } else {
    uni.showToast({
      title: '请先选择图片',
      icon: 'none',
    });
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 18px;
  margin-bottom: 20px;
}

.upload-btn {
  background-color: #f0f0f0;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.plus-icon {
  font-size: 40px;
  color: #007bff;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.upload-component {
  display: none; /* 隐藏默认的上传按钮 */
}

.image-rules {
  margin-top: 20px;
  color: #888;
  font-size: 14px;
}

.image-rules text {
  display: block;
  margin: 5px 0;
}

.input-container {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.input-box {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.upload-button {
  background-color: #007bff;
  padding: 12px 20px;
  margin-top: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.upload-btn-text {
  color: white;
  font-size: 16px;
}
</style>
